<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>"/>
<meta charset="utf-8" />
<link rel="shortcut icon" href="images/store.png"/><!--图片logo  -->
<title>B2B移动端下单平台</title>
<meta name="description" content="weishop">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name='apple-touch-fullscreen' content='yes'>
<meta name="full-screen" content="yes">
<link href="//m.hnhcyy.com" rel="dns-prefetch">
<link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
<link href="css/global.css?v=0715" rel="stylesheet" />
<link href="css/index.css?v=071502" rel="stylesheet" />
<link href="css/toTop.css?v=0715" rel="stylesheet" />
<script>
function nofound(spid,e){//未找到图片
	var e = e || window.event;
	var img=e.srcElement||e.target;
	console.log(spid);
	img.src="//www.hnhcyy.com/resource/img/"+spid+"/0.jpg"; 
	img.onerror=null;// 控制不要一直跳动  
}
</script>
</head>
<body>
	<div class="pagetop">
	<header class="search_top" align="center">
			<span>
				<a href="login?sjid=${sjid}"> <img class="my"
						src="images/my_acount.png">
				</a>
			</span>
			<span class="m_title">
				<input placeholder="搜索商品" name="q" value=""
									class="search-input" type="search" accesskey="s">
				<img class="search_button" src="images/search_btn.png">
			</span>
			<span id="search_action"><img id='search_icon' class="search"
					src="images/search_list.png">
			</span>
	</header>
	</div>
                <div class="slider">
                    <ul class="imgpic buypic">
                            	<c:if test="${sjid==1}">
                            		<li style="background: url(images/lsx/lunbo_lsx_07.jpg) no-repeat scroll center top transparent;display:none;
                            		background-size:100%;position:relative">
                            		<div id="time">
	                            		<span id="day"></span>天<span id="hour"></span>小时<span id="minute"></span>分<span id="second"></span>秒
                            		</div>
                            		<script>
                            		//总时间（秒）
                            		function timeRun(endTime){
                            			var time = document.querySelector("#time");
                            			var second = document.querySelector("#second");
                            			var minute = document.querySelector("#minute");
                            			var hour = document.querySelector("#hour");
                            			var day = document.querySelector("#day");
                            			var startTime = new Date("2017/07/14 18:35:00")*1.0;
                            			var endTime = new Date(endTime.replace(/-/g,'/'))*1.0;//结束时间
                            			var curTime = new Date()*1.0;
	                            		var sec = (endTime - curTime)/1000;//计算总秒数
	                            		var secMinus = function(){
	                            			if(new Date()*1.0 >= startTime){
	                            				time.parentNode.style.display="block";
	                            			}
	                            			if(Math.floor(sec)>0){
		                            			sec--;
	                            				var nd = Math.floor(sec/(24*60*60));
	                            				var nh = Math.floor(sec/(60*60)%24);
	                            				var nm = Math.floor(sec/60%60);
	                            				var ns = Math.floor(sec%60);
	                            				day.innerHTML = nd;
	                            				hour.innerHTML = nh;
	                            				minute.innerHTML = nm;
	                            				second.innerHTML = ns;
	                            				time.style.display = "block";
	                            			}else{
	                            				var timeBuyPic = time.parentNode;
	                            				timeBuyPic.parentNode.removeChild(timeBuyPic);
	                            				clearInterval(tt);
	                            			}
	                            		}
	                            		return secMinus;
                            		}
                           			var tr = timeRun("2017-07-25");
                            		var tt = setInterval(tr,1000);
                            		</script>
                            		</li>
                            		<li style="background: url(images/lsx/lunbo_lsx_05.jpg) no-repeat scroll center top transparent;background-size:100%;"></li>
                            		<li style="background: url(images/lsx/lunbo_lsx_03.jpg) no-repeat scroll center top transparent;background-size:100%;"></li>
                            		<li style="background: url(images/lsx/lunbo_lsx_04.jpg) no-repeat scroll center top transparent;background-size:100%;"></li>
                            	</c:if>
                            	<c:if test="${sjid==2}">
                            		<li style="background: url(images/zat/lunbo_zat_01.jpg) no-repeat scroll center top transparent;background-size:100%;display: block;"></li>
                            	</c:if>
                    </ul>
                    <div class="num">
                        <ul>
                            <li class="on">1</li>
                            <li class="">2</li>
                            <li class="">3</li>
                        </ul>
                    </div>
                </div>
    <div class="list_container clearfix">
         <c:forEach items="${productList}" var="product">
             <a href="javascript:;" class="pop-itema" spid="${product.spid}">
                 <div class="pop_item">
                     <div class="pop_img">
                         <%-- <img class="lazy" src="images/product/${product.spid}/0.jpg" onerror="nofound('${product.spid}')"/> --%>
                         <img class="lazy"  
                         alt="${product.spmch}" src="http://www.hnhcyy.com/resource/img/${product.spid}/10.jpg" onerror="nofound('${product.spid}')"/>
                         <noscript><img src="http://www.hnhcyy.com/resource/img/${product.spid}/10.jpg" width="640" height="480"></noscript>
                     </div>
                     <div class="pop_price">
                          <span>${product.spmch}</span>
                          <c:if test="${product.productBal[0].kxshl==0}">
                          	<span style="color:#da0203;display:-webkit-inline-box">缺货</span>
                          </c:if>
                         <%-- <c:if test="${user!=null}">
                         	<span style="color:#da0203">￥${product.price}</span>
                         </c:if> --%>
                     </div>
                 </div>
             </a>
         </c:forEach>
    </div>
    <div id="search_page" class="hide">
        <div class="search_head" style="color:white">
            商品分类
            <a class="search_btn" id="search_back">返回</a>
        </div>
        <ul class="search_links" >
            <li class="search_link">
                <span class="arrow"></span>
                <ul class="search_subs">
                    <li class="search_sub"></li>
                    <li class="search_sub"></li>
                </ul>
            </li>
            <c:forEach items="${leibieList}" var="leibie">
                <li class="search_link"><a id='leibie' href="ProductList?leibie=${leibie.findex}&sjid=${sjid}">${leibie.fname}</a></li>
            </c:forEach>
        </ul>
    </div>
    <div class="weui-loadmore">
		<i class="weui-loading"></i> <span class="weui-loadmore__tips">正在加载</span>
	</div>
  	
	<!--返回顶部  -->
	<div class="return top">
    	<a href="javascript:;"><img src="//s.juancdn.com/jpwebapp_v1/images_v1/icon/back-top.png?ts=43cd703b21136a3e_1480432233"></a>
	</div>
	<!--返回首页  -->
	<div class="return home">
    	<a href="index?sjid=${sjid}"><img src="images/20150330115820_kk-1.png"></a>
	</div>
    <div class="footer_container">
        <div id="top_line"></div>
        <div id="bottom_rights">
            <p style="font-size:12px">&copy;湖南恒昌医药有限公司</p>
        </div>
    </div>
    <jsp:include page="part/index-foot.jsp"></jsp:include>
<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<!-- <script src="//cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.js"></script> -->
<script src="js/jquery.SuperSlide.2.1.1.js"></script>
<script src="js/search.js"></script>
<script src="js/global.js"></script>
<script src="js/post.js"></script>    
<script src="//cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>
<script src="js/search4index.js?v=0521"></script>
<script>
/*图片延迟加载  */
/* $(function() {
    $("img.lazy").lazyload({
  		placeholder : "img/grey.gif", //用图片提前占位
    // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
  		effect: "fadeIn", // 载入使用何种效果
    // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
  		threshold: 200, // 提前开始加载
    // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
  		event: 'click',  // 事件触发时才加载
    // event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
  		container: $("#container"),  // 对某容器中的图片实现效果
    // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
  		failurelimit : 10 // 图片排序混乱时
     // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
	});
}); */

/* $(window).bind("load", function() {
    var timeout = setTimeout(function() { $("img.lazy").trigger("sporty") }, 1000);
});  */ 
    var leibie=<%=request.getParameter("leibie")%>;
    var tejia=<%=request.getParameter("tejia")%>;
    var sjid=${sjid};
    var user='${user}';
    if(user){//登录后可以加载更多
    	$.getScript("js/addmore4index.js?v=051302");
    }else{
    	$(".weui-loadmore").empty().html("登录后可查看更多");
    }
    $(".slider").slide({
        titCell: ".num ul",
        mainCell: ".buypic",
        effect: "left",
        easing: "swing",
        //autoPlay: true,
        delayTime: 1000,
        autoPage: true
    });
    $('#search_action').click(function () {
        $('#search_page').removeClass('hide').addClass('show');
    });
    $(".search_btn").click(function () {
        search_page.hide_page();
    });
     //点击外侧区域，隐藏分类
     $(document).on ('click',function (e){
    	var e = e || window.event;
        var target = e.srcElement|| e.target;
    	if ($('#search_page').hasClass('show') && target.id != 'search_icon' && target.id != 'leibie'){
    		search_page.hide_page();
    		return false;
     	}
	})
	
	$(".pop-itema").on("click",function(e){
        	e = e || window.event;
            var target = e.srcElement|| e.target;
        	if ($('#search_page').hasClass('show') && target.id != 'search_icon' && target.id != 'leibie'){
        		search_page.hide_page();
         	}else{
				var productid=$(this).attr("spid");
				var form = new CodeSTD.form({
			        url:'Shop/Detail?sjid='+sjid,
			        method:'POST',
			        params:{productid:productid}
			    })
				$(form).submit();
				form = null;
         	}
	})
	var initsize=$(".pop-itema").length;
	if(initsize<12)$(".weui-loadmore").hide();
	
	/* var state = { //这里可以是你想给浏览器的一个State对象，为后面的StateEvent做准备。
			title : "test",
			url : "index"
		};
	history.pushState(state, "test", "index");
	window.addEventListener('popstate', function(e){ 
		if (history.state){ 
			var state = e.state; 
			alert("我监听到了浏览器的返回按钮事件啦"); 
		} 
	}, false); */
</script>
</body>
</html>